<!-- 产品详情 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="layout">
      <view class="image-box">
        <!-- 
        <u--image
          width="100%"
          src="../../../../../../static/my/images/my_65_67.png"
        ></u--image> -->
        <u-swiper width="100%" :list="supImgList" name="url"></u-swiper>
      </view>
      <view class="area-view">
        <view class="quotation flex m-r-4">
          <u-tag
            text="剪样"
            plain
            size="mini"
            borderColor="#ff9800"
            bgColor="#ff9800"
            color="#fff"
          ></u-tag>
          <view class="bot-view m-l-20 m-r-40" style="color: #ff9800">
            <text class="f-24">¥</text>
            <text class="f-30 p-l-4">{{ calculateCutSample() }}</text>
            <text class="f-24">/米</text>
          </view>
          <u-tag
            text="大货"
            plain
            size="mini"
            borderColor="#f00"
            fontSize="10"
            bgColor="#f00"
            color="#fff"
          ></u-tag>
          <view class="bot-view red m-l-20">
            <text class="f-24">¥</text>
            <text class="f-30 p-l-4">{{ calculateNormal() }}</text>
            <text class="f-24">/米</text>
          </view>
        </view>
        <view class="name f-32 p-t-20 p-b-28">
          <text class="p-r-10">{{ listData.spu.code }}</text>
          <text>{{ listData.spu.name }}</text>
        </view>
        <view class="scal-view f-24 flex">
          <view class="item-box">
            <text class="p-r-8">销售</text>
            <text>60.5万</text>
          </view>
          <view class="item-box">
            <text class="p-r-8">浏览</text>
            <text>0</text>
          </view>
          <view class="item-box">
            <text class="p-r-8">收藏</text>
            <text>0</text>
          </view>
        </view>
      </view>
      <u-gap height="3" bgColor="#eee"></u-gap>
      <view class="info-view">
        <view class="title f-30 p-b-20"> 产品信息 </view>
        <view class="ul-box flex p-b-20">
          <view class="li">
            <view class="flex flex-aic w-100p">
              <clIcon type="icon-zhongguohangtiantubiaoheji-weizhuanlunkuo-" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">类别 </text>
            </view>

            <text v-if="listData.spu.spaceDiffValue" class="m-l-44">{{ listData.spu.spaceDiffValue }}</text>
          </view>
          <view class="li">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-xuehua" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">季度 </text>
            </view>
            <text v-if="listData.spu.quarterName" class="m-l-44">{{ listData.spu.quarterName }}</text>
          </view>
        </view>
        <view
          v-if="widWeg.widthValue || widWeg.gramWeightValue"
          class="ul-box flex p-b-20"
        >
          <view class="li" v-if="widWeg.widthValue">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-chizi_o" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">幅宽 </text>
            </view>
            <text class="m-l-44"
              >{{ widWeg.widthValue
              }}{{ widWeg.widthUnitName }}</text
            >
          </view>
          <view class="li" v-if="widWeg.gramWeightValue">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-kezhong" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">克重 </text>
            </view>
            <text class="m-l-44"
              >{{ widWeg.gramWeightValue
              }}{{ widWeg.gramWeightUnitName }}</text
            >
          </view>
        </view>

        <!-- <view class="ul-box flex p-b-20">
          <view class="li" v-if="listData.spu.widthSemiValue">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-chizi_o" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">坯布幅宽 </text>
            </view>
            <view></view>
            <text class="m-l-44"
              >{{ listData.spu.widthSemiValue
              }}{{ listData.spu.widthSemiUnitName }}</text
            >
          </view>
          <view class="li" v-if="listData.spu.gramWeightSemiValue">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-kezhong" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">坯布克重 </text>
            </view>
            <text class="m-l-44"
              >{{ listData.spu.gramWeightSemiValue
              }}{{ listData.spu.gramWeightSemiUnitName }}</text
            >
          </view>
        </view> -->

        <view class="ul-box flex p-b-20">
          <view class="li" v-if="listData.spu.unitName || listData.spu.supplyTypeName">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-danwei" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">单位 </text>
            </view>
            <text class="m-l-44">{{ listData.spu.unitName }}</text>
          </view>
          <view class="li" v-if="listData.spu.supplyTypeName">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-yundanhaoicon" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">供货 </text>
            </view>
            <text class="m-l-44">{{ listData.spu.supplyTypeName }}</text>
          </view>
        </view>
        <view class="ul-box flex p-b-20">
          <view class="li" v-if="listData.spu.components">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-chengfen" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">成分 </text>
            </view>
            <view></view>
            <text class="m-l-44">{{ listData.spu.components }}</text>
          </view>
        </view>
        <view class="ul-box flex p-b-20">
          <view class="li" v-if="listData.spu.remarks">
            <view class="flex flex-aic w-100p">
               <clIcon type="icon-gongdanguanli" color="#7fc8eb" size="14"></clIcon>
              <text class="p-l-16 p-r-16">备注 </text>
            </view>
            <view></view>
            <text class="m-l-44">{{ listData.spu.remarks }}</text>
          </view>
        </view>

        <u-gap height="3" bgColor="#eee"></u-gap>
        <view
          class="dl-box flex"
          @click="
            goRoute(
              '/pages/application/pages/information/product-information/detail/components/color-list/color-list',
              listData.colorVoList,
              1
            )
          "
        >
          <view class="dt"> 颜色 </view>
          <view class="dd"> {{ listData.colorVoList.length }} </view>
          <u-icon name="arrow-right" size="10" color="#eee"></u-icon>
        </view>
        <view class="dl-box flex">
          <view class="dt"> 预估成本 </view>
          <view class="dd"> </view>
          <u-icon name="arrow-right" size="10" color="#eee"></u-icon>
        </view>
        <view
          class="dl-box flex"
          @click="
            goRoute(
              '/pages/application/pages/information/product-information/detail/components/low-calorie/low-calorie-list',
              listData.bottomCardVoList,
              2
            )
          "
        >
          <view class="dt"> 底卡 </view>
          <view class="dd"> {{ listData.bottomCardVoList.length }} </view>
          <u-icon name="arrow-right" size="10" color="#eee"></u-icon>
        </view>
        <view
          class="dl-box flex"
          @click="
            goRoute(
              '/pages/application/pages/information/product-information/detail/components/specifications/specifications',
              listData.specList,
              3
            )
          "
        >
          <view class="dt"> 规格 </view>
          <view class="dd"> {{ listData.specList.length }} </view>
          <u-icon name="arrow-right" size="10" color="#eee"></u-icon>
        </view>
        <view class="dl-box flex">
          <view class="dt"> 宝贝详情 </view>
        </view>
      </view>
    </view>
    <u-gap height="120" bgColor="#eee"></u-gap>
    <!-- 提示 -->
    <u-alert
      type="info"
      effect="dark"
      fontSize="13"
      :show-icon="true"
      title="产品未上架,客户在[小程序商城]无法查看到该产品"
      style="position: fixed; bottom: 120rpx; left: 0; right: 0"
      class="alert-view"
    ></u-alert>
    <!-- 底部悬浮 -->
    <view class="fixed-btn flex" style="background: #fff">
      <u-button
        text="上架"
        shape="circle"
        style="color: rgb(64, 158, 255)"
        color="#c2e5ff"
      ></u-button>
      <u-button
        text="编辑"
        type="primary"
        shape="circle"
        class="m-l-20"
        color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
        @click="clickItem"
      ></u-button>
    </view>
     <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import {
  getInfoForBillDetailById,
  addData,
} from "@/apis/bill/information/product";
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  components: {
    clIcon,
  },
  name: "Details",
  data() {
    return {
      config: {
        title: "产品详情",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
      },
      listData: {
        labelList: [], //标签传数组
        spu: {
          code: null, //编号
          components: null, // 成分
          name: null, //名称
          type: 1, //商品类型(成品,胚布)
          typeName: "",
          unitId: "", //单位id
          unitName: "", // 单位name 瓶
          widthValue: "", // 成品幅宽
          widthUnitName: "", // 成品幅宽单位

          gramWeightValue: "", // 成品克重
          ghtUnitName: "", // 成品克重单位

          gramWeightSemiValue: "", //坯布克重
          gramWeightSemiUnitName: "", //坯布克重单位

          widthSemiValue: "", //坯布幅宽
          widthSemiUnitName: "cm", //坯布幅宽单位
          catId: "", // 类别id
          catName: "", // 类别name
          quarterName: "", // 季度传name
          spaceDiffTypeName: "", // 空差 传+ - =
          spaceDiffValue: "", // 类别name
          supplyTypeId: "", // 供货类型ID
          supplyTypeName: "", // 供货类型name
          technologyName: "", // 工艺 数码印花
          remarks: "", // 备注
        },
        spuImageList: [
          // {
          //     "url": "https://jxc-saas.oss-cn-hangzhou.aliyuncs.com/2023-07-09/1688895538542.png",
          //     "name": "1688895538542.png",
          //     "uid": 1688895538542,
          //     "status": "success",
          //     "typeId": 2
          // }
        ], // 产品主图片
        colorVoList: [], //商品颜色
        bottomCardVoList: [], // 低卡信息
        specList: [], // 规格信息
      },
      bulkCargoList: [],
      cuttingSamplesList: [],
      supImgList: [],
      widWeg:{}
    };
  },
  onShow() {
    if (this.$Route.query.id) {
      this.getInfoForBillDetailByIds();
    }
  },
  onLoad() {
    // if (this.$Route.query.id) {
    //   this.getInfoForBillDetailByIds();
    // }
    uni.$on("on-pdcl-arr", (data) => {
      switch (data.type) {
        case 1:
          this.listData.bottomCardVoList = data.data;
          this.setData();
          break;
        case 2:
          this.listData.colorVoList = data.data;
          this.setData();
          break;
        case 3:
          this.listData.specList = data.data;
          this.setData();
          break;
        default:
          break;
      }
    });
  },
  methods: {
    calculateCutSample(min, max) {
      const minValue = Math.min(
        ...this.cuttingSamplesList.map((object) => object.price || 0)
      );
      const maxValue = Math.max(
        ...this.cuttingSamplesList.map((object) => object.price || 0)
      );
      if (minValue === Infinity && maxValue === -Infinity) {
        return 0;
      }
      if (minValue === maxValue) {
        return minValue;
      }
      if (minValue != maxValue) {
        return minValue + "-" + maxValue;
      }
      return 0;
    },
    calculateNormal(min, max) {
      const minValue = Math.min(
        ...this.bulkCargoList.map((object) => object.price || 0)
      );
      const maxValue = Math.max(
        ...this.bulkCargoList.map((object) => object.price || 0)
      );
      if (minValue === Infinity && maxValue === -Infinity) {
        return 0;
      }
      if (minValue === maxValue) {
        return minValue;
      }
      if (minValue != maxValue) {
        return minValue + "-" + maxValue;
      }
      return 0;
    },
    clickItem() {
      this.$Router.push({
        path: "/pages/application/pages/information/product-information/detail/index",
        query: {
          id: this.$Route.query.id,
        },
      });
      // console.log("所点击的列表索引：", item);
    },
    setData() {
      let _this = this;
      addData(this.listData).then((res) => {
        if (!res.data.flag) return;
        const data = res.data || {};
        _this.$refs.uToast.show({
          type: "success",
          title: "默认主题",
          message: "保存成功",
          complete() {
            // uni.navigateBack();
          },
        });
      });
    },
    // 页面跳转
    goRoute(url, item = null, type = null) {
      this.$setPageParams("product-information-detail", {
        item: item,
      });
      if (type == 2 && this.listData.bottomCardVoList.length == 0) {
        this.$Router.push({
          path: "/pages/application/pages/information/product-information/detail/components/low-calorie/add-low-calorie",
        });
        return;
      }
      this.$Router.push({
        path: url,
        query: {
          data: this.$Route.query.id || "",
          spuId: this.listData.spu.id || "",
          item: encodeURIComponent(JSON.stringify(item)),
          unitId: this.listData.spu.unitId || "",
          unitName: this.listData.spu.unitName || "",
        },
      });
    },
    // 获取类型
    getInfoForBillDetailByIds() {
      getInfoForBillDetailById(this.$Route.query.id).then((res) => {
        if (!res.data.flag) return;
        const data = res.data.data || {};
        this.listData = data;
        this.bulkCargoList = [];
        this.cuttingSamplesList = [];
        for (
          let index = 0;
          index < this.listData.goodsPriceList.length;
          index++
        ) {
          const item = this.listData.goodsPriceList[index];
          if (item.priceType === "normal") {
            this.bulkCargoList.push(JSON.parse(JSON.stringify(item)));
          } else if (item.priceType === "cutSample") {
            this.cuttingSamplesList.push(JSON.parse(JSON.stringify(item)));
          }
        }

        for (let i = 0; i < this.listData.spuImageList.length; i++) {
          // supImgList
          const element = this.listData.spuImageList[i];
          if (element.typeId == "1") {
            this.supImgList.push(JSON.parse(JSON.stringify(element)));
          }
        }
        if (this.supImgList.length <= 0) {
          this.supImgList.push({
            url: "../../../../../../static/my/images/my_65_68.jpg",
          });
        }
        for (let i = 0; i < this.listData.widthGramWeightList.length; i++) {
          const element = this.listData.widthGramWeightList[i];
          if (element.isDefault) {
            this.widWeg = element;
          }
        }
      });
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.image-box {
  overflow: hidden;
  margin: 0 auto;
}
.area-view {
  background: #fff;
  padding: 20rpx;
}
.scal-view {
  justify-content: space-between;
  .item-box {
    color: #999;
  }
}
.info-view {
  background-color: #fff;
  padding: 20rpx 0 0;
  .title {
    padding: 0 20rpx;
  }
  .ul-box {
    padding: 0 30rpx;
    .li {
      // display: flex;
      // align-items: center;
      color: #999;
      flex: 1;
    }
  }
  .dl-box {
    padding: 20rpx 20rpx;
    border-bottom: 6rpx solid #eee;
    align-items: center;
    &:last-child {
      border: none;
    }
    .dt {
      font-size: 32rpx;
    }
    .dd {
      flex: 1;
      text-align: right;
      padding-right: 10rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>